$(function() {    
    let id = window.location.search.split('=')[1]
    let pageNum = 1
    let pageN = null
    let arr = []
    function render() {
        $.ajax({
            type: 'get',
            url: 'http://localhost:3000/api/getproductlist?pageid='+ pageNum +'&categoryid='+id,
            dataType: 'json',
            success(info) {
                console.log(info);
                $('.shop-box').html(template('tmp',info.result))
                console.log(id);
                
            }
        })
    }
    render()
    
    function pageRender() {
        $.ajax({
            type: 'get',
            url: 'http://localhost:3000/api/getproductlist?pageid='+ pageNum +'&categoryid='+id,
            dataType: 'json',
            success(info) {
                pageN = Math.ceil(info.result.count / 10)
                console.log(pageN);
                arr.length = pageN
                $('#box').html(template('tql',{list:arr}))
            }
        })
    }
    pageRender()
    
    $('.right').click(function() {        
        if (pageNum >= pageN ) {            
            return false            
        } else {
            pageNum = pageNum + 1
        }
        render(pageNum)
        $('option').eq(pageNum-1).prop('selected',true)
    })
    
    $('.left').click(function() {        
        if (pageNum < 2 ) {            
            return false            
        } else {
            pageNum = pageNum - 1
        }
        render(pageNum)
        $('option').eq(pageNum-1).prop('selected',true)
    })


    $('#box').on('change',function() {
        pageNum = $(this)[0].selectedIndex + 1
        console.log(pageNum);
        render(pageNum)
    })

})